<template>
  <div class="mc-bubble" :class="bubbleClasses">
    <!-- 用户头像 -->
    <div v-if="align === 'right'" class="mc-bubble__avatar">
      {{ avatarConfig.name || 'You' }}
    </div>

    <!-- 消息内容容器 -->
    <div class="mc-bubble__content">
      <!-- 消息气泡 -->
      <div class="mc-bubble__bubble">
        <slot v-if="$slots.default"></slot>
        <span v-else>{{ content }}</span>
      </div>

      <!-- Loading 状态 -->
      <div v-if="loading" class="mc-bubble__loading">
        <div class="typing-dot"></div>
        <div class="typing-dot"></div>
        <div class="typing-dot"></div>
      </div>
    </div>

    <!-- AI 头像 -->
    <div v-if="align === 'left'" class="mc-bubble__avatar">
      {{ avatarConfig.name || 'AI' }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  content?: string
  align?: 'left' | 'right'
  avatarConfig?: { name: string }
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  content: '',
  align: 'left',
  avatarConfig: () => ({ name: 'AI' }),
  loading: false
})

const bubbleClasses = computed(() => ({
  'mc-bubble--left': props.align === 'left',
  'mc-bubble--right': props.align === 'right'
}))
</script>

<style scoped>
.mc-bubble {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.mc-bubble--right {
  flex-direction: row-reverse;
}

.mc-bubble__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.mc-bubble__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 70%;
}

.mc-bubble__bubble {
  padding: 12px 16px;
  border-radius: 16px;
  background: #f3f4f6;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.6;
}

.mc-bubble--right .mc-bubble__bubble {
  background: #dcf8c6;
  border-radius: 16px 16px 4px 16px;
}

.mc-bubble--left .mc-bubble__bubble {
  border-radius: 4px 16px 16px 16px;
}

.mc-bubble__loading {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: #fef3c7;
  border-radius: 8px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px);
  }
}
</style>